<!--
    跨层通信 - provide、inject
    顶层通过：provide() 提供数据，底层通过： inject() 获取数据
    可以传递：普通数据 - 响应式数据 - 函数
-->
<script setup>
import CenterCom from "@/components/CenterCom.vue";
import {provide, ref} from "vue";

// 1.普通数据
provide('theme-color', 'pink')

// 2.响应式数据
const count = ref(100);
provide('count', count)
setTimeout(() => {
    count.value = 500
}, 1000)

// 3.传递函数 => 给后代传递修改数据的方法
provide('changeCount', (newCount) => {
    count.value = newCount
})

</script>

<template>
    <h3 style="text-align: center;">Vue3-Study</h3>
    <hr>
    <div>
        <h1>I am Top</h1>
        <CenterCom/>
    </div>
</template>